<template>

<!--        <sticky class-name="sub-navbar">-->
<!--          <div class="table-top-header">添加通道</div>-->
<!--        </sticky>-->


      <div class="detail-container">
        <div class="form-top-header">
          {{isEdit?'资源编辑':'添加新资源'}}
        </div>
        <el-divider></el-divider>
        <div class="form-content-container">
          <el-form ref="formRes" :model="formRes" :rules="rules" label-width="80px" size="medium">
            <el-row :span="24">
              <el-col :span="16" :offset="4">
                  <el-form-item prop="username" label="用户名称" :label-width="labelWidth">
                    <el-input v-model="formRes.username"></el-input>
                  </el-form-item>
              </el-col>
            </el-row>
            <el-row :span="24">
              <el-col :span="16" :offset="4">
                <el-form-item prop="apiKey" label="产品标识" :label-width="labelWidth">
                  <el-input v-model="formRes.apiKey"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :span="24">
              <el-col :span="16" :offset="4">
                <el-form-item prop="supplier" label="通道ID" :label-width="labelWidth">
<!--                  <el-input v-model="formRes.supplier"></el-input>-->
                  <el-select v-model="formRes.supplier" placeholder="选择通道">
                    <el-option label="第一个通道" :value="1"></el-option>
                    <el-option label="第二个通道" :value="2"></el-option>
                    <el-option
                      v-for="item in supplierList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :span="24">
              <el-col :span="16" :offset="4">
                <el-form-item prop="shopPrice" label="通道价格" :label-width="labelWidth">
                  <el-input v-model="formRes.shopPrice"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :span="24">
              <el-col :span="16" :offset="4">
                <el-form-item prop="payPrice" label="出售价格" :label-width="labelWidth">
                  <el-input v-model="formRes.payPrice"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :span="24">
              <el-col :span="16" :offset="4">
                <el-form-item prop="mark" label="备注" :label-width="labelWidth">
                  <el-input v-model="formRes.mark"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :span="24">
              <el-col :span="16" :offset="4">
                <el-form-item prop="backUrl" label="回调地址" :label-width="labelWidth">
                  <el-input v-model="formRes.backUrl"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :span="24">
              <el-col :span="10" :offset="8">
                <el-form-item>
                  <el-button :loading="loading" type="primary" @click="submitForm">{{isEdit ? '确认修改' : '立即创建' }}</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky/index'
import MdInput from '@/components/MDinput/index'
import { add, update, get } from '@/api/message-aisle'
export default {
  components: { MdInput, Sticky },
  props: {
    isEdit: Boolean
  },
  data(){
    //自定义验证
    const validateFormIp = (rule, value, callback) => {
      if(value === ""){
        callback( new Error('IP不能为空'))
      }else{
        if(value.length<10){
          callback( new Error('长度不低于11位'))
        }
        callback()
      }
    };
    const validateAccessCode = (rule, value, callback) => {
      if(value ===''){
        callback( new Error('接入码必须为空'))
      }else {
        if(Number.isInteger(value)){
          callback( new Error('接入码必须是数字'))
        }else {
          callback()
        }
      }
    }
      return{
        supplierList:[],//通道 列表
        formRes:{
          username:'',
          apiKey:'',
          supplier:'',
          shopPrice:'',
          payPrice:'',
          mark: '',
          backUrl: ''
        },
        loading: false,
        labelWidth:'120px',
        rules: {
          username:[
            {required: true, message: '名字必须填写', trigger: 'blur'}
          ],
          apiKey:[
            { validator: validateFormIp, trigger: 'blur' }
          ],
          supplier: [
            { required: true, message: '通道不能为空', trigger: 'blur' }
            // { type: 'number', message: '接入码必须为数字', trigger: 'blur' }
          ],
          shopPrice: [
            { required: true,message:'通道价格不能为空', trigger: 'blur' }
          ],
          payPrice: [
            { required: true,message:'出售价格不能为空', trigger: 'blur' }
          ]
        }
    }
  },
  created() {
    if(this.isEdit){
      const id = this.$route.params.id
      this.getDetail(id)
    }

  },
  mounted() {
    this.getSupplierList()
  },
  methods: {
    getSupplierList(){
      console.log("获取通道列表")
    },
    getDetail(id){
      //获取详情接口
      // get(id).then(response =>{
      //   this.setDate(response.data)
      // })
      const data = {
        username:'13619253845',
        apiKey:'YL01100',
        supplier:'第二个通道',
        shopPrice:'2',
        payPrice:'3',
        mark: '联通',
        backUrl: ''
      }
      this.setDate(data)
    },
    submitForm(){
      this.$refs.formRes.validate( valid => {
        if(!this.loading){
          this.loading = true
          if(valid){
            console.log('表单验证通过');
            //做下拷贝  防止更改数据 影响展示
            const postDate = {...this.formRes}
            if(!this.isEdit){
              this.$message({
                message:'创建提交-api/message-aisle.js/add请求提交',
                type: 'success'
              })
              // add(postDate)
            }else {
              console.log(this.$route.query);
              console.log(this.$route.params);
              this.$message({
                message:'修改提交-api/message-aisle.js/update请求提交',
                type: 'success'
              })
              // update(postDate)
            }
            this.loading = false
          }else{
            console.log('表单验证不通过通过');
            this.loading = false
          }
        }else {
          console.log('已经提交请勿重复点击')
          this.$message({ message: '请勿重复提交', type: 'error' })
        }

      })
    },
    setDate(data){
      const {
        username,
        apiKey,
        supplier,
        shopPrice,
        payPrice,
        mark,
        backUrl
      } =data
      this.formRes = {
        ...this.formRes,
        username,
        apiKey,
        supplier,
        shopPrice,
        payPrice,
        mark,
        backUrl
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .form-top-header{
    text-align: center;
    padding: 30px 30px 6px 30px;
    font-size: 22px;
    color: #606266;
  }
  .form-top-header span{width: 100%}
  .detail-container{
    /*padding: 40px;*/
  }
  .form-content-container{
    /*background:#f8fafb*/
  }
</style>
